<template>
    <div class="echartsimg">
        <!-- <h1>处方综合管理</h1> -->
        <div id="char" style="width: 600px; height: 600px"></div>
        <div id="char1" style="width: 600px; height: 600px"></div>
    </div>
    <!-- 表格 -->
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="住院部" width="180" />
            <el-table-column prop="num" label="本周服务义务数" width="180" />
            <el-table-column prop="money" label="金额" />
            <el-table-column prop="lastweek" label="上周金额" />
            <el-table-column prop="month" label="本月金额" />
            <el-table-column prop="audit" label="审计人员" />
            <el-table-column prop="prin" label="负责人" />
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, watchEffect } from 'vue';
import { ECharts, EChartsOption, init } from 'echarts';
import { getRevenue } from '@/API/western.api'
import { log } from 'console';
const data = reactive({
    name: [],
    otherDatas: [],
    titleList:[]
})


onMounted(async () => {
    await getRevenues()
    // 树状图
    const charEle = document.getElementById('char') as HTMLElement;
    const charEch: ECharts = init(charEle);
    const option: EChartsOption = {
        tooltip: {
            // trigger: 'axis'
        },
        legend: {
            //   data: ['外科综合', '内科综合', '超声科']
            // data:name
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                // prettier-ignore
                data: ['本周权重', '本月权重', '极度权重', '年度权重']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                // 渲染树状图小标题
                name: data.name[0],
                type: 'bar',
                data: [
                    22.0, 39.9, 48.0, 79.9, 75.6, 76.7, 165.6, 162.2, 92.6, 20.0, 6.4, 3.3
                ],
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
            },
            {
                // 渲染树状图小标题
                name: data.name[1],
                type: 'bar',
                data: [
                    35.6, 59.9, 9.0, 26.4, 118.7, 70.7, 175.6, 182.2, 48.7, 79.9, 67.0, 2.3
                ],
                markPoint: {
                    data: [
                        { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                    ]
                },
            },
            {
                // 渲染树状图小标题
                name: data.name[2],
                type: 'bar',
                data: [
                    63.6, 99.9, 3.0, 26.4, 58.7, 79.7, 175.6, 182.2, 48.7, 78.8, 6.0, 2.3
                ],
                markPoint: {
                    data: [
                        { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                    ]
                },
            }
        ]
    };
    charEch.setOption(option);
    // 饼图
    const charEle1 = document.getElementById('char1') as HTMLElement;
    const charEch1: ECharts = init(charEle1);
    const option1: EChartsOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: data.titleList
            // [
            //     '头颈外科',
            //     '呼吸道感染科',
            //     '内科综合',
            //     '妇科',
            //     '外科综合',
            //     '中西医科',
            //     '肛肠科',
            //     '超声科',
            //     '口腔科',
            //     '内镜科'
            // ]
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 14
                },
                labelLine: {
                    show: false
                },
                // 渲染饼图外圈数据
                data: data.otherDatas
                // [
                //     // {value:data.otherDatas.values}
                //     { value: 1548, name: '内科综合' },
                //     { value: 775, name: '外科综合' },
                //     { value: 679, name: '超声科', selected: true }
                // ]
            },
            {
                name: 'Access From',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: {
                    length: 30
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                // 渲染饼图外圈数据
                data:data.otherDatas,
                // data: [
                //     // { value: 497, name: '头颈外科' },
                //     // { value: 269, name: '外科综合' },
                //     // { value: 976, name: '呼吸道感染科' },
                //     // { value: 678, name: '妇科' },
                //     // { value: 316, name: '中西医科' },
                //     // { value: 348, name: '肛肠科' },
                //     // { value: 597, name: '口腔科' },
                //     // { value: 618, name: '内镜科' }
                //     // {value:data.otherDatas,name:data.otherDatas}
                // ]
            }
        ]



    }
    charEch1.setOption(option1);
});

// 表格
const tableData = [
    {
        date: '住院部',
        num: '17852',
        money: '15236412',
        lastweek: "17641523",
        month: "549874102",
        audit: "刘倩敏",
        prin: "赵勇"

    },

]
// 发请求部分
// const store = useStore()//vuex 引入模块

const getRevenues = async () => {
    const res = await getRevenue()
    // console.log(res);
    const aa = res.data.departmentChart
    //   console.log(aa);
    // 树状图小标题
    let title = aa.centerData.map((item: any, index: any) => {
        return item.name
    })
    //   console.log(title);
    data.name = title
    // console.log(data.name[0]);
    // 饼图外圈数据
    let deskwork=aa.otherData.map((item:any,index:any)=>{
        return item

    })
    // console.log(deskwork);
    data.otherDatas=deskwork
    // console.log(data.otherDatas);

    // 饼图小标题
    let titletwo=aa.type.map((item:any,index:any)=>{
        return item
    })

    data.titleList=titletwo
    console.log(data.titleList); 
}

watchEffect(() => {
    getRevenues()
})
</script>

<style scoped>
.echartsimg {
    display: flex;
}
</style>